import React, { useEffect, useState } from 'react';
import { Affix, Button, Alert, Radio, Select, Input, Space, Row, Col, Table, Popover } from 'antd';
import request, { exportFile } from '@/utils/request';
import { CmdbContent, CmdbHeader, isAuthorized, HcpTableTooltip, Authorized } from '@/components';
import moment from 'moment';
import permission from '@/config/permission';
import cmdbres from '@/data/cmdbres';
import DeleteModal from './delete';
import CreateModal from './create';
import DetailModal from './detail';

const ModelAssociateType = ({ history, match, location }) => {
    const [searchValue, setSearchValue] = useState();
    const [loading, setLoading] = useState(false);
    const [tableData, setTableData] = useState([]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 0,
    });
    const [row, setRow] = useState({});
    const [showCreateModal, setShowCreateModal] = useState(false);
    const [showDeleteModal, setShowDeleteModal] = useState(false);
    const [showDetailModal, setShowDetailModal] = useState(false);
    const getTableData = async (params = { current: 1, pageSize: 10 }) => {
        setLoading(true);
        try {
            const res = await request({
                ...cmdbres.queryAssociateType,
                data: {
                    pageSize: params.pageSize,
                    pageNumber: params.current,
                    queryFilter: {
                        EQ: {
                            associateTypeCode: searchValue ? searchValue : undefined,
                        },
                    },
                },
            });
            setLoading(false);
            if (res && res.data) {
                setPagination((pagination) => ({
                    ...pagination,
                    current: res.pageNumber,
                    pageSize: res.pageSize,
                    total: res.total,
                }));
                res.data.map((item, index) => (item.key = index));
                setTableData(res.data);
            } else {
                setTableData([]);
            }
        } catch (error) {
            console.log(error);
        }
    };

    useEffect(() => {
        getTableData();
    }, []);

    const handleTableChange = (e) => {
        getTableData(e);
    };

    const columns = [
        {
            title: '关系类型名称',
            key: 'name',
            dataIndex: 'name',
            isShow: true,
            width: 140,
            copyable: true,
            ellipsis: true,
        },
        {
            title: '唯一标识',
            key: 'associateTypeCode',
            dataIndex: 'associateTypeCode',
            isShow: true,
            width: 140,
            copyable: true,
            ellipsis: true,
            render: (text, record, index) => (
                <HcpTableTooltip
                    label="associateTypeCode"
                    showValue={text}
                    onClick={() => {
                        setRow(record);
                        setShowDetailModal(true);
                    }}
                />
            ),
        },
        {
            title: '源->目标描述',
            key: 'srcToDestDesc',
            dataIndex: 'srcToDestDesc',
            isShow: true,
            width: 140,
            copyable: true,
            ellipsis: true,
        },
        // {
        //     title: "目标->源描述",
        //     key: "destToSrcDesc",
        //     dataIndex: "destToSrcDesc",
        //     isShow: true,
        //     width: 140,
        //     copyable: true,
        //     ellipsis: true,
        // },
        {
            title: '使用数量',
            key: 'useNum',
            dataIndex: 'useNum',
            isShow: true,
            width: 140,
        },
        {
            title: '操作',
            fixed: 'right',
            width: 100,
            render: (text, record, index) => {
                return (
                    <Space key={record.id}>
                        <Authorized authority={permission.relationType_edit} noMatch={null}>
                            <Popover content="编辑">
                                <span
                                    disabled={record.woIsSystem == '1'}
                                    className="iconfont icon-edit"
                                    onClick={() => {
                                        if (record.woIsSystem != '1') {
                                            setRow(record);
                                            setShowCreateModal(true);
                                        }
                                    }}
                                />
                            </Popover>
                        </Authorized>
                        <Authorized authority={permission.relationType_delete} noMatch={null}>
                            <Popover content="删除">
                                <span
                                    disabled={record.woIsSystem == '1'}
                                    className="iconfont icon-delete"
                                    onClick={() => {
                                        if (record.woIsSystem != '1') {
                                            setRow(record);
                                            setShowDeleteModal(true);
                                        }
                                    }}
                                />
                            </Popover>
                        </Authorized>
                    </Space>
                );
            },
        },
    ];

    return (
        <CmdbContent>
            <CmdbHeader title={'关联类型'} />
            <section className="hcp__page">
                <section className="hcp__page__container">
                    <div className="back-white m-b-10 padding-10">
                        唯一标识：
                        <Input
                            placeholder="请输入关键字搜索"
                            value={searchValue}
                            onChange={(e) => {
                                setSearchValue(e.target.value);
                            }}
                            style={{ width: '210px' }}
                            allowClear
                        />
                        <Space style={{ marginLeft: 10 }}>
                            <Button type="primary" onClick={getTableData}>
                                查询
                            </Button>
                            <Button
                                onClick={() => {
                                    setSearchValue();
                                }}
                            >
                                重置
                            </Button>
                        </Space>
                    </div>
                    <div className="back-white padding-10">
                        <Space className="m-b-10">
                            <Authorized authority={permission.relationType_add} noMatch={null}>
                                <Button
                                    className="hcp_toolbar_btn"
                                    type="primary"
                                    onClick={() => {
                                        setRow({});
                                        setShowCreateModal(true);
                                    }}
                                >
                                    新建关联类型
                                </Button>
                            </Authorized>
                        </Space>
                        <p>关联类型 | {pagination.total}个</p>
                        <Table
                            columns={columns}
                            loading={loading}
                            dataSource={tableData}
                            scroll={{ x: '100%' }}
                            pagination={{
                                showSizeChanger: true,
                                // showTotal: (total, range) => (
                                //     <span
                                //         style={{
                                //             position: 'absolute',
                                //             left: '0%',
                                //             fontSize: '13px',
                                //             color: 'gray',
                                //         }}
                                //     >
                                //         共 {total} 条记录
                                //     </span>
                                // ),
                                showQuickJumper: {
                                    goButton: <Button style={{ margin: '0 10px' }}>确定</Button>,
                                },
                                ...pagination,
                            }}
                            onChange={handleTableChange}
                            hideSetting
                        />
                    </div>
                </section>
            </section>
            {showCreateModal && (
                <CreateModal
                    visible={showCreateModal}
                    setVisible={setShowCreateModal}
                    onCreateFinish={getTableData}
                    info={row}
                />
            )}
            <DeleteModal
                onDeleteFinish={getTableData}
                visible={showDeleteModal}
                setVisible={setShowDeleteModal}
                info={row}
            />
            <DetailModal visible={showDetailModal} setVisible={setShowDetailModal} info={row} />
        </CmdbContent>
    );
};

export default ModelAssociateType;
